<template>
  <div>
    <search-bar @onSearch="searchResult" ref="searchBar" class="search-bar"></search-bar>
    <div class="infinite-list-wrapper" style="overflow:auto">
      <ul
        class="list"
        v-infinite-scroll="load"
        infinite-scroll-disabled="disabled">
        <li v-for="item in words" :key="item.id" class="list-item">
          <el-card class="card-body" shadow="hover">
            <p class="card-word">{{item.content}}</p>
            <p><span class="card-date">{{item.date}}</span><span class="card-author">by：{{item.author}}</span></p>
          </el-card>
        </li>
      </ul>
      <p v-if="loading">加载中...</p>
      <p v-if="noMore">没有更多了</p>
    </div>
  </div>
</template>

<script>
  import SearchBar from './SearchBar'
    export default {
      name: "WordCard",
      components:{SearchBar},
      data () {
        return {
          words: [
            {
              content: "耳朵终将遇到耳朵",
              date: "2020-05-05 9:49",
              author: "耳朵"
            },
            {
              content: "耳朵终将遇到耳朵",
              date: "2020-05-05 9:49",
              author: "耳朵"
            }
          ],
          count: 5,
          loading: false
        }
      },
      mounted: function () {  //钩子函数(已挂载)
        this.loadWords()
      },
      computed: {
        noMore () {
          return this.count >=this.words.size
        },
        disabled () {
          return this.loading || this.noMore
        }
      },
      methods: {
        loadWords(){
          var _this = this
          this.$axios.get('/words').then(resp =>{
            if(resp && resp.status === 200){
              _this.words  = resp.data
            }
          })
        },
        load () {
          this.loading = true
          setTimeout(() => {
            this.count += 2
            this.loading = false
          }, 2000)
        }
      }
    }
</script>

<style scoped>
  .list-item{
    list-style-type:none;
    margin-bottom: 25px;
  }
  .card-body{
    width: 700px;
  }
  .card-word{
    text-align: center;
  }
  .card-author{
    display:inline;
    color: #cac6c6;
  }
  .card-date{
    margin-right:470px;
    text-align: right;
    font-size: 14px;
    color: #cac6c6;
  }
  .search-bar{
    position: fixed;
    top: 10px;
    left: 300px;
  }

</style>
